<template>
  <el-dialog
    title="商家订单"
    v-model="visible"
    width="90%"
    @close="handleClose"
  >
    <!-- 搜索表单 -->
    <el-form :model="searchForm" :inline="true" style="margin-bottom: 20px">
      <el-form-item label="订单号">
        <el-input
          v-model="searchForm.orderTradeId"
          placeholder="请输入订单号"
          clearable
          style="width: 200px"
        ></el-input>
      </el-form-item>
      <el-form-item label="订单状态">
        <el-select
          v-model="searchForm.tradeStatus"
          placeholder="请选择订单状态"
          clearable
          style="width: 150px"
        >
          <el-option label="待支付" :value="0"></el-option>
          <el-option label="待发货" :value="1"></el-option>
          <el-option label="待收货" :value="2"></el-option>
          <el-option label="已取消" :value="3"></el-option>
          <el-option label="已完成" :value="4"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="快递状态">
        <el-select
          v-model="searchForm.expressStatus"
          placeholder="请选择快递状态"
          clearable
          style="width: 150px"
        >
          <el-option label="未发货" :value="0"></el-option>
          <el-option label="已发货" :value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="创建时间">
        <el-date-picker
          v-model="timeRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="YYYY-MM-DD"
          style="width: 260px"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleSearch"
          >搜索</el-button
        >
        <el-button @click="handleReset">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 订单列表 -->
    <el-table
      :data="list"
      border
      class="table"
      header-cell-class-name="table-header"
      max-height="500"
    >
      <el-table-column
        prop="orderTradeId"
        label="订单号"
        min-width="200"
        fixed="left"
      ></el-table-column>
      <el-table-column
        prop="tradeTime"
        label="下单时间"
        :formatter="dateFormat"
        min-width="160"
      ></el-table-column>
      <el-table-column
        prop="tradeMoney"
        label="订单金额"
        align="center"
        min-width="100"
      >
        <template #default="scope">
          <span style="color: #f56c6c">¥{{ scope.row.tradeMoney }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="tradeNumber"
        label="数量"
        align="center"
        width="80"
      ></el-table-column>
      <el-table-column label="订单状态" align="center" width="100">
        <template #default="scope">
          <el-tag v-if="scope.row.tradeStatus === 0" type="info">待支付</el-tag>
          <el-tag v-else-if="scope.row.tradeStatus === 1" type="warning"
            >待发货</el-tag
          >
          <el-tag v-else-if="scope.row.tradeStatus === 2" type="primary"
            >待收货</el-tag
          >
          <el-tag v-else-if="scope.row.tradeStatus === 3" type="danger"
            >已取消</el-tag
          >
          <el-tag v-else-if="scope.row.tradeStatus === 4" type="success"
            >已完成</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column label="快递状态" align="center" width="100">
        <template #default="scope">
          <el-tag v-if="scope.row.expressStatus === 0" type="info"
            >未发货</el-tag
          >
          <el-tag v-else-if="scope.row.expressStatus === 1" type="success"
            >已发货</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column label="支付方式" align="center" width="100">
        <template #default="scope">
          <span v-if="scope.row.payWay === 1">支付宝</span>
          <span v-else-if="scope.row.payWay === 2">微信</span>
          <span v-else-if="scope.row.payWay === 3">衫德</span>
          <span v-else-if="scope.row.payWay === 4">余额</span>
          <span v-else-if="scope.row.payWay === 10">汇聚</span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="recipientsName"
        label="收件人"
        min-width="100"
      ></el-table-column>
      <el-table-column
        prop="recipientsMobile"
        label="收件人手机"
        min-width="120"
      ></el-table-column>
      <el-table-column
        prop="expressOrder"
        label="快递单号"
        min-width="150"
      ></el-table-column>
    </el-table>
    <div class="pagination" style="margin-top: 20px">
      <el-pagination
        background
        layout="total, prev, pager, next"
        :current-page="query.pageIndex"
        :page-size="query.pageSize"
        :total="query.pageTotal"
        @current-change="handlePageChange"
      ></el-pagination>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">关 闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { api } from "../../../api/index";
import moment from "moment";

export default {
  name: "OrdersDialog",
  props: {
    modelValue: {
      type: Boolean,
      default: false,
    },
    userId: {
      type: String,
      default: "",
    },
    merchantId: {
      type: [Number, String],
      default: null,
    },
  },
  emits: ["update:modelValue"],
  data() {
    return {
      list: [],
      query: {
        pageIndex: 1,
        pageSize: 10,
        pageTotal: 0,
      },
      searchForm: {
        orderTradeId: "",
        tradeStatus: null,
        expressStatus: null,
      },
      timeRange: [],
    };
  },
  computed: {
    visible: {
      get() {
        return this.modelValue;
      },
      set(val) {
        this.$emit("update:modelValue", val);
      },
    },
  },
  watch: {
    visible(val) {
      if (val && this.merchantId) {
        this.query.pageIndex = 1;
        this.resetSearch();
        this.loadData();
      }
    },
  },
  methods: {
    loadData() {
      const params = {
        limit: this.query.pageSize,
        offset: this.query.pageIndex,
        merchantId: this.merchantId,
        ...this.searchForm,
      };

      // 添加时间范围
      if (this.timeRange && this.timeRange.length === 2) {
        params.createTime = `${this.timeRange[0]} - ${this.timeRange[1]}`;
      }

      // 移除值为 null 或空字符串的参数
      Object.keys(params).forEach((key) => {
        if (params[key] === null || params[key] === "") {
          delete params[key];
        }
      });

      api("/web/so/sowl", params).then((res) => {
        if (res.code === 2000) {
          this.list = res.data.rows || res.data || [];
          this.query.pageTotal = res.data.total || 0;
        } else {
          this.list = [];
          this.query.pageTotal = 0;
        }
      });
    },
    handlePageChange(val) {
      this.query.pageIndex = val;
      this.loadData();
    },
    handleSearch() {
      this.query.pageIndex = 1;
      this.loadData();
    },
    handleReset() {
      this.searchForm = {
        orderTradeId: "",
        tradeStatus: null,
        expressStatus: null,
      };
      this.timeRange = [];
      this.query.pageIndex = 1;
      this.loadData();
    },
    resetSearch() {
      this.searchForm = {
        orderTradeId: "",
        tradeStatus: null,
        expressStatus: null,
      };
      this.timeRange = [];
    },
    dateFormat(row, column) {
      var date = row[column.property];
      if (date == undefined) {
        return "";
      }
      return moment(date).format("YYYY-MM-DD HH:mm:ss");
    },
    handleClose() {
      this.visible = false;
      this.list = [];
      this.query.pageIndex = 1;
      this.query.pageTotal = 0;
      this.resetSearch();
    },
  },
};
</script>

<style scoped>
.table {
  width: 100%;
  font-size: 14px;
}

:deep(.el-form-item) {
  margin-bottom: 15px;
}

:deep(.el-form-item__label) {
  font-weight: 500;
}
</style>
